<template>
  <div class="app-container random-generate flex flex-col">
    <div class="mb-4 flex items-center">
      <div class="w-48 mr-2">
        <el-select v-model="folder" size="small" placeholder="选择目录">
          <el-option
            v-for="folderItem in folderOptions"
            :key="folderItem"
            :label="folderItem"
            :value="folderItem"
          ></el-option>
        </el-select>
      </div>
      <div class="w-48 mr-2">
        <el-input v-model="randomCfg.startIndex" size="small" placeholder="请输入起始位置" />
      </div>
      <div class="w-48 mr-2">
        <el-input v-model="randomCfg.count" size="small" placeholder="请输入数量" />
      </div>
      <div class="w-48 mr-2">
        <el-input v-model="randomCfg.padLength" size="small" placeholder="请输入位数" />
      </div>
      <el-button :disabled="isGenerating" type="primary" size="small" @click="handleGenerate">生成</el-button>
      <el-button type="primary" size="small" @click="dialogVisible = true">历史数据</el-button>
      <el-button type="primary" size="small" @click="handleClearHistoricalData">清空历史数据</el-button>
    </div>
    <div class="flex-1 codemirror-container">
      <codemirror v-model="textarea_value" :options="options" />
    </div>

    <el-dialog title="历史数据" :visible.sync="dialogVisible" width="640px">
      <codemirror v-model="historicalDataStr" :options="options" />
      <div slot="footer" class="dialog-footer">
        <el-button type="info" size="mini" @click="handleCopyHistoricalData">复制</el-button>
        <el-button type="primary" size="mini" @click="handleHistoricalDataConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { FOLDER_OPTIONS, randomFnMap, CODEMIRROR_OPTIONS } from '@/utils/study.js'

import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'

export default {
  name: 'RandomGenerate',
  components: {
    codemirror
  },
  data() {
    return {
      // 随机配置
      randomCfg: {
        // 起始位置
        startIndex: 1,
        // 数量
        count: 500,
        // 位数
        padLength: 8,
        // 历史数据
        historicalData: []
      },
      // 选择的目录
      folder: 'five',
      // 目录选项
      folderOptions: FOLDER_OPTIONS,
      // 输入框的值
      textarea_value: '',
      // codemirror 配置
      options: CODEMIRROR_OPTIONS,
      // 历史数据弹窗
      dialogVisible: false,
      // 历史数据
      historicalDataStr: '',
      // 是否正在生成
      isGenerating: false
    }
  },

  methods: {
    handleGenerate() {
      const { startIndex, count, padLength, historicalData } = this.randomCfg

      let result
      let temp = []

      this.isGenerating = true

      // 循环直到生成非空数据
      while (temp.length === 0) {
        result = randomFnMap[this.folder](Number(startIndex), Number(count), Number(padLength), historicalData)

        // 将 result 转换为一个平坦的数组
        temp = Object.values(result).flat()

        // 如果 temp 仍然为空，继续生成
        if (temp.length === 0) {
          console.log('生成数据为空，重新生成...')
        }
      }

      this.isGenerating = false

      // 输出时间
      console.log('生成时间:', new Date().toLocaleString())

      // 将 result 转换为格式化的 JSON 字符串
      const formattedResult = JSON.stringify(result, null, 2)
      this.textarea_value = formattedResult

      // 自动复制到剪贴板
      navigator.clipboard
        .writeText(formattedResult)
        .then(() => {
          this.$message.success('生成内容已复制到剪贴板！')
        })
        .catch((err) => {
          console.error('复制失败:', err)
          this.$message.error('复制失败，请手动复制内容！')
        })
    },
    // 点击历史数据确定按钮
    handleHistoricalDataConfirm() {
      const temp = JSON.parse(this.historicalDataStr)
      this.randomCfg.historicalData = Object.values(temp).flat()
      this.dialogVisible = false
    },
    // 清空历史数据
    handleClearHistoricalData() {
      this.historicalDataStr = ''
      this.randomCfg.historicalData = []
    },
    // 复制历史数据
    handleCopyHistoricalData() {
      navigator.clipboard.writeText(this.historicalDataStr)
      this.$message.success('复制成功！')
    }
  }
}
</script>

<style lang="scss">
.random-generate {
  .codemirror-container {
    .vue-codemirror {
      height: 100%;
      .CodeMirror {
        // height: 800px;
        height: calc(100vh - 180px);
      }
    }
  }
}
</style>
